<template>
  <div style="width: 102%">
    <el-table :data="clientList" style="width: 102%" row-key="id">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="avatar" style="width: 40px; height: 40px ; border-radius: 50%" />
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="identify" label="身份"></el-table-column>
      <el-table-column prop="birthday" label="生日"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="goToChange(scope.row)">修改</el-button>
          <el-button type="text" @click="goToDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 0,
      clientList: [],
    };
  },
  mounted() {
    this.querypage();
  },

  methods: {

    handleSizeChange(val) {
      this.pagesize = val;
      this.querypage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querypage();
    },

    querypage: async function () {
      let result = await this.$http.get(
        "/client/pageAll/current/" + this.currentPage + "/size/" + this.pagesize
      );
      this.clientList = result.data.list;
      this.total = result.data.total;
    },

    showClientTable: async function () {
      const response = await this.$http.get("/client/getAll");
      this.clientList = response.data;
    },

    goToDelete(index,row) {
    
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("/client/del/"+row.id)
            .then((response) => {
              if (response.status === 200) {
                this.clientList.splice(index, 1); 
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.message || "删除失败");
              }
            })      
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
};
</script>

<style scoped>
.el-menu-item {
  width: 200px; 
}

.block{
  margin-left: 10px;
  padding-left: 10px;
}

</style>